// import './index.scss'
import React, { Component } from 'react'
import { Tag, Popup, PickerView } from 'antd-mobile'
import { GetHouses, GetCondition } from '../../api/list'
import { PostionsCity } from '../../api/city'
import ListStyles from './index.module.css'
class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      select: [{
        id: 1,
        name: '区域',
        icon: "xiala",
      }, {
        id: 2,
        name: '方式',
        icon: "xiala",
      }, {
        id: 3,
        name: '租金',
        icon: "xiala",
      }, {
        id: 4,
        name: '筛选',
        icon: "xiala",
      }],
      activeIndex: 0,
      housesData: [],
      visible1: false, //区域弹出
      visible2: false, //方式弹出
      visible3: false, //租金弹出
      visible4: false, //筛选弹出
      columns1: [
        ['区域', '地铁'],
        [],
        [],
      ],
      value1: ['A', '1'],
      columns2: [
        ['不限', '整租', '合租'],
      ],
      value2: [],
      columns3: [
        ['不限', '1000及以下', '1000-2000', '2000-3000', '3000-4000', '4000-5000', '5000-7000', '7000以上'],
      ],
      value3: [],
      roomType: [],//户型
      oriented: [], //朝向
      floor: [],  //楼层
      characteristic: [] //房屋亮点
    }
  }
  componentDidMount() {
    this.getHouses()
    this.getCondition()
  }
  //获取房屋查询条件
  getCondition = async () => {
    const { value } = JSON.parse(localStorage.getItem("cityVal"))
    const resp = await GetCondition({
      id: value
    })
    console.log(resp.data.body)
    console.log(resp.data.body.roomType)
    console.log(resp.data.body.oriented)
    console.log(resp.data.body.floor)
    console.log(resp.data.body.characteristic)
    this.setState({
      roomType: [...resp.data.body.roomType],
      oriented: [...resp.data.body.oriented],
      floor: [...resp.data.body.floor],
      characteristic: [...resp.data.body.characteristic]
    })
  }
  //select 切换
  handleTab = async (item) => {
    this.setState({ activeIndex: item.id })  //设置下标
    //  将item的id解构出来
    const { name } = item
    switch (name) {
      case "区域":
        this.setState({ visible1: true })
        return
      case "方式":
        this.setState({ visible2: true })
        return
      case "租金":
        this.setState({ visible3: true })
        return
      case "筛选":
        this.setState({ visible4: true })
        return
      default:
        break;
    }
  }
  //获取数据 
  getHouses = async () => {
    //获取当前 城市Id
    const { label } = JSON.parse(localStorage.getItem('cityVal'));
    const cityId = await PostionsCity({
      name: label
    })
    //而后根据当前城市Id去查询当前城市的房源
    const resp = await GetHouses({
      cityId: cityId.data.body.value,
      rentType: "合租"
    });
    this.setState({
      housesData: resp.data.body.list
    })
  }
  //跳转详情页面
  goToDetails = (item) => {
    const { history } = this.props;
    const { houseCode } = item;
    //跳转详情页面
    history.push(`/details/${houseCode}`)
  }
  render() {
    const { select, activeIndex, housesData, columns1, columns2, columns3, roomType, oriented, floor, characteristic } = this.state
    const { history } = this.props
    const { label } = JSON.parse(localStorage.getItem('cityVal'));
    return (
      <div className="list">
        <div className="list_search">
          <span className="icon iconfont icon-zuo" onClick={() => history.go(-1)}></span>
          <div className="list_search_left">
            <div className='searchLeft'>
              <span onClick={() => history.push('/citylist')}>{label}</span>
              <span className="icon iconfont icon-xiala"></span>
            </div>
            <div className="searchRight">
              <span className="icon iconfont icon-sousuo"></span>
              <input type="text" placeholder="请输入小区或地址" />
            </div>
          </div>
          <span className="icon iconfont icon-baiduMaps" onClick={() => history.push('/map')}></span>
        </div>
        <div className="list_select Sticky_fixed">
          {
            select?.map(item => {
              return (
                <b key={item.id} className={item.id === activeIndex ? 'active' : ''} onClick={() => this.handleTab(item)}>
                  <span>{item.name}</span>
                  <span className={`icon iconfont icon-${item.icon}`}></span>
                </b>
              )
            })
          }
          <div>
            <Popup visible={this.state.visible1} position='top'
              onMaskClick={() => { this.setState({ visible1: false }) }}
              bodyStyle={{ minHeight: '40vh' }}
            >
              <PickerView
                columns={columns1}
                value={this.state.value1}
                onChange={async (val) => {
                  this.setState({ value1: val })
                }}
              />
              <div className={ListStyles.FilterFooter_root}>
                <span className={`${ListStyles.FilterFooter_btn} ${ListStyles.FilterFooter_cancel}`} onClick={() => this.setState({ visible1: false })}>取消</span>
                <span className={`${ListStyles.FilterFooter_btn} ${ListStyles.FilterFooter_ok}`} onClick={() => this.setState({ visible1: false })}>确定</span>
              </div>
            </Popup >
            <Popup visible={this.state.visible2} position='top'
              onMaskClick={() => { this.setState({ visible2: false }) }}
              bodyStyle={{ minHeight: '40vh' }}
            >
              <PickerView
                columns={columns2}
                value={this.state.value2}
                onChange={async (val) => {
                  this.setState({ value2: val })
                }}
              />
              <div className={ListStyles.FilterFooter_root}>
                <span className={`${ListStyles.FilterFooter_btn} ${ListStyles.FilterFooter_cancel}`} onClick={() => this.setState({ visible2: false })}>取消</span>
                <span className={`${ListStyles.FilterFooter_btn} ${ListStyles.FilterFooter_ok}`} onClick={() => this.setState({ visible2: false })}>确定</span>
              </div>
            </Popup >
            <Popup visible={this.state.visible3} position='top'
              onMaskClick={() => { this.setState({ visible3: false }) }}
              bodyStyle={{ minHeight: '40vh' }}
            >
              <PickerView
                columns={columns3}
                value={this.state.value3}
                onChange={async (val) => {
                  this.setState({ value3: val })
                }}
              />
              <div className={ListStyles.FilterFooter_root}>
                <span className={`${ListStyles.FilterFooter_btn} ${ListStyles.FilterFooter_cancel}`} onClick={() => this.setState({ visible3: false })}>取消</span>
                <span className={`${ListStyles.FilterFooter_btn} ${ListStyles.FilterFooter_ok}`} onClick={() => this.setState({ visible3: false })}>确定</span>
              </div>
            </Popup >
            <Popup Popup visible={this.state.visible4} position='right'
              onMaskClick={() => { this.setState({ visible4: false }) }}
              bodyStyle={{ minWidth: '80vw' }}
            >
              <div className={ListStyles.FilterMore_tags}>
                <dl className={ListStyles.FilterMore_dl}>
                  <dt className={ListStyles.FilterMore_dt}>户型</dt>
                  <dd className={ListStyles.FilterMore_dd}>
                    {
                      roomType?.map(item => {
                        return <span key={item.value} className={ListStyles.FilterMore_tag}>{item.label}</span>
                      })
                    }
                  </dd>
                  <dt className={ListStyles.FilterMore_dt}>朝向</dt>
                  <dd className={ListStyles.FilterMore_dd}>

                    {
                      oriented?.map(item => {
                        return <span key={item.value} className={ListStyles.FilterMore_tag}>{item.label}</span>
                      })
                    }
                  </dd><dt className={ListStyles.FilterMore_dt}>楼层</dt>
                  <dd className={ListStyles.FilterMore_dd}>
                    {
                      floor?.map(item => {
                        return <span key={item.value} className={ListStyles.FilterMore_tag}>{item.label}</span>
                      })
                    }
                  </dd>
                  <dt className={ListStyles.FilterMore_dt}>房屋亮点</dt>
                  <dd className={ListStyles.FilterMore_dd}>
                    {
                      characteristic?.map(item => {
                        return <span key={item.value} className={ListStyles.FilterMore_tag}>{item.label}</span>
                      })
                    }
                  </dd>
                </dl>
              </div>




              <div className={`${ListStyles.FilterFooter_root} ${ListStyles.FilterMore_footer}`}>
                <span className={`${ListStyles.FilterFooter_btn} ${ListStyles.FilterFooter_cancel}`} onClick={() => this.setState({ visible4: false })}>清除</span>
                <span className={`${ListStyles.FilterFooter_btn} ${ListStyles.FilterFooter_ok}`} onClick={() => this.setState({ visible4: false })}>确定</span>
              </div>
            </Popup >

          </div>
        </div >
        <div className="list_container">
          {
            housesData?.map(item => {
              return (
                <div key={item.houseCode} className="list_HouseItem" onClick={() => this.goToDetails(item)}>
                  <div className="HouseItem_imgWrap">
                    <img className="HouseItem_img" src={`http://47.102.145.189:8009${item.houseImg}`} alt="" />
                  </div>
                  <div className="HouseItem_content">
                    <h3 className="HouseItem_title">{item.title}</h3>
                    <div className="HouseItem_desc">{item.desc}</div>
                    <div>
                      <Tag color='#e1f5f8' style={{ color: '#39becd', margin: " 5px  5px 5px 0" }}>{item.tags[0]}</Tag>
                      {item.tags[1] && <Tag color='#e1f5ed' style={{ color: '#3fc28c', margin: "5px" }}>{item.tags[1]}</Tag>}
                    </div>
                    <div className="HouseItem_price">
                      <span className="HouseItem_priceNum">{item.price}</span>
                      元/月</div>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div >
    )
  }
}


export default List